<template>
    <div class="main">
        <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
            <a-tabs :activeKey="customActiveKey" class="main_tabs_box"
                @change="handleTabClick">
                <a-tab-pane key="tab1" tab="专家登录">
                    <div name="短信登录" lable="短信登录" v-if="loginType==='phone'">
                        <a-form-item>
                            <a-input v-decorator="['mobile',validatorRules.mobile]" size="large" type="text"
                                placeholder="手机号">
                                <a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }" />
                            </a-input>
                        </a-form-item>
                        <a-row :gutter="0">
                            <a-col :span="16">
                                <a-form-item>
                                    <a-input v-decorator="['inputCode',validatorRules.inputCode]" size="large"
                                        type="text" @change="inputCodeChange" placeholder="请输入验证码">
                                        <a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }" />
                                    </a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8" style="text-align: right">
                                <img v-if="requestCodeSuccess" class="codeimg" style="width:100%;cursor:pointer;"
                                    :src="randCodeImage" @click="handleChangeCheckCode" />
                                <img v-else class="codeimg" src="../../assets/checkcode.png"
                                    @click="handleChangeCheckCode" />
                            </a-col>
                        </a-row>
                        <!-- <a-row :gutter="0">
                        <a-col class="gutter-row" :span="16"> -->
                        <a-form-item style="position:relative;">
                            <a-input v-decorator="['captcha',validatorRules.captcha]" size="large" type="text"
                                placeholder="请输入验证码">
                                <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }" />
                            </a-input>
                            <a-button class="getCaptcha" tabindex="-1" :disabled="state.smsSendBtn"
                                @click.stop.prevent="getCaptcha"
                                v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"></a-button>
                        </a-form-item>
                        <!-- </a-col> -->
                        <!-- <a-col class="gutter-row" :span="8"> -->
                        <!-- <a-button
                              class="getCaptcha"
                              tabindex="-1"
                              :disabled="state.smsSendBtn"
                              @click.stop.prevent="getCaptcha"
                              v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"></a-button> -->
                        <!-- </a-col> -->
                        <!-- </a-row> -->
                        <a-form-item>
                            <a-checkbox
                                v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]">自动登录</a-checkbox>
                            <a class="forge-password" style="float: right;" value="账号登录" @click="change1">
                                账号登录
                            </a>
                            <!-- <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;margin-right:10px;">
                                忘记密码
                              </router-link>
                              <router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >
                                专家注册申请
                              </router-link> -->
                        </a-form-item>
                    </div>
                    <div name="账号登录" lable="账号登录" v-else>
                        <a-form-item>
                            <a-input size="large"
                                v-decorator="['username_zj',validatorRules.username,{ validator: this.handleUsernameOrEmail }]"
                                type="text" placeholder="请输入帐户名">
                                <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
                            </a-input>
                        </a-form-item>

                        <a-form-item>
                            <a-input v-decorator="['password_zj',validatorRules.password]" size="large" type="password"
                                autocomplete="false" placeholder="密码">
                                <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
                            </a-input>
                        </a-form-item>

                        <a-row :gutter="0">
                            <a-col :span="16">
                                <a-form-item>
                                    <a-input v-decorator="['inputCode',validatorRules.inputCode]" size="large"
                                        type="text" @change="inputCodeChange" placeholder="请输入验证码">
                                        <a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }" />
                                    </a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8" style="text-align: right">
                                <img v-if="requestCodeSuccess" class="codeimg" :src="randCodeImage"
                                    @click="handleChangeCheckCode" />
                                <img v-else class="codeimg" src="../../assets/checkcode.png"
                                    @click="handleChangeCheckCode" />
                            </a-col>
                        </a-row>

                        <a-form-item>
                            <a-checkbox
                                v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]">自动登录</a-checkbox>
                            <a class="forge-password" style="float: right;" value="短信登录" @click="change1">
                                短信登录
                            </a>
                            <!-- <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;margin-right:10px;">
                              忘记密码
                            </router-link>
                            <router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >
                              专家注册申请
                            </router-link> -->
                        </a-form-item>
                    </div>
                </a-tab-pane>
            </a-tabs>

            <!--<a-form-item>
                <a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]" >自动登录</a-checkbox>
                <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
                  忘记密码
                </router-link>
               <router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >
                  注册账户
                </router-link>
              </a-form-item>-->

            <a-form-item>
                <a-button size="large" type="primary" htmlType="submit" class="login-button" :loading="loginBtn"
                    @click.stop.prevent="handleSubmit" :disabled="loginBtn">确定
                </a-button>
            </a-form-item>
        </a-form>

        <two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess"
            @cancel="stepCaptchaCancel"></two-step-captcha>
        <login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant>
        <!--<third-login ref="thirdLogin"></third-login>-->
    </div>
</template>

<script>
    //import md5 from "md5"
    import api from '@/api'
    import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
    import {
        mapActions
    } from "vuex"
    import {
        timeFix
    } from "@/utils/util"
    import Vue from 'vue'
    import {
        ACCESS_TOKEN,
        ENCRYPTED_STRING
    } from "@/store/mutation-types"
    import {
        putAction,
        postAction,
        getAction
    } from '@/api/manage'
    import {
        encryption,
        getEncryptedString
    } from '@/utils/encryption/aesEncrypt'
    import store from '@/store/'
    import {
        USER_INFO
    } from "@/store/mutation-types"
    import ThirdLogin from './third/ThirdLogin'
    import LoginSelectTenant from "./LoginSelectTenant";
    export default {
        components: {
            LoginSelectTenant,
            TwoStepCaptcha,
            ThirdLogin
        },
        data() {
            return {
                customActiveKey: "tab1",
                loginBtn: false,
                // login type: 0 email, 1 username, 2 telephone
                loginType: "username",
                requiredTwoStepCaptcha: false,
                stepCaptchaVisible: false,
                form: this.$form.createForm(this),
                encryptedString: {
                    key: "",
                    iv: "",
                },
                state: {
                    time: 60,
                    smsSendBtn: false,
                },
                validatorRules: {
                    username: {
                        rules: [{
                            required: true,
                            message: '请输入用户名!'
                        }, {
                            validator: this.handleUsernameOrEmail
                        }]
                    },
                    password: {
                        rules: [{
                            required: true,
                            message: '请输入密码!',
                            validator: 'click'
                        }]
                    },
                    mobile: {
                        rules: [{
                            validator: this.validateMobile
                        }]
                    },
                    captcha: {
                        rule: [{
                            required: true,
                            message: '请输入验证码!'
                        }]
                    },
                    inputCode: {
                        rules: [{
                            required: true,
                            message: '请输入验证码!'
                        }]
                    }
                },
                verifiedCode: "",
                inputCodeContent: "",
                inputCodeNull: true,
                currentUsername: "",
                currdatetime: '',
                randCodeImage: '',
                requestCodeSuccess: false,
                tabPosition: 'bottom',
            }
        },
        created() {
            this.currdatetime = new Date().getTime();
            Vue.ls.remove(ACCESS_TOKEN)
            this.getRouterData();
            this.handleChangeCheckCode();
            // update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
            //this.getEncrypte();
            // update-end- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
        },
        methods: {
            ...mapActions(['Login', 'Logout', 'PhoneLogin', 'zjlogin', 'ZjUserYzmLogin', 'TjdwUserLogin']),
            // handler
            handleUsernameOrEmail(rule, value, callback) {
                const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
                if (regex.test(value)) {
                    this.loginType = 0
                } else {
                    this.loginType = 1
                }
                callback()
            },
            handleTabClick(key) {
                this.customActiveKey = key
                // this.form.resetFields()
            },
            passwordEncryption(passwordUser) {
                //后台公钥
                let publicKey = 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAhkx+lJeZ2KbV+CZ2cFG2MpksTWPTyi3hQt+5Cb1S2NPSdT+1p3tkcO1+YRi2yHvmGsR58of3obr6ygHAMnLVB0+/1daHzY5FDNRb27sJuOEqD3Q1RiYAQfeYmxuEyM4g0TA2X4zkYeLFbKF8suhOVpMa+dp0TnLUA31eyxv+bDhY38T3xtgrJZxHZ2r28ncpdEHF2NNxK0nfAWBJnfcfs/35ESQtY4t2ExHEXRIQUZ2XBh1V9nM4PM2LlJy1xruN2tcTbFKFSJHrMp+Zso0iJJlD+qGISDOeLFGD/dETtqmLkmIJnsz0ARbos/mwAP0gc9Hd5mTpi8RSi8Px5dA26QIDAQAB'
                let encryptor = new JSEncrypt();
                encryptor.setPublicKey(publicKey);
                let passwordEncryp = encryptor.encrypt(passwordUser);
                return passwordEncryp;
            },
            handleSubmit() {
                let that = this
                let loginParams = {};
                that.loginBtn = true;
                if (that.loginType == 'phone') {
                    that.form.validateFields(['mobile', 'captcha', 'inputCode', 'rememberMe'], {
                        force: true
                    }, (err, values) => {
                        if (!err) {
                            loginParams.remember_me = values.rememberMe
                            loginParams.key = that.currdatetime
                            loginParams.phoneNumber = values.mobile
                            loginParams.code = values.captcha
                            // console.log("登录参数",loginParams)
                            that.ZjUserYzmLogin(loginParams).then((res) => {
                                sessionStorage.setItem('role', 3)
                                this.$refs.loginSelect.show(res.result)
                            }).catch((err) => {
                                that.requestFailed(err);
                            });
                        } else {
                            that.loginBtn = false;
                        }
                    })
                } else {
                    that.form.validateFields(['username_zj', 'password_zj', 'inputCode', 'rememberMe'], {
                        force: true
                    }, (err, values) => {
                        if (!err) {
                            loginParams.userName = values.username_zj
                            // update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
                            //loginParams.password = md5(values.password)
                            //loginParams.password = encryption(values.password,that.encryptedString.key,that.encryptedString.iv)
                            // loginParams.passWord = values.password_zj
                            loginParams.passWord = this.passwordEncryption(values.password_zj)
                            loginParams.remember_me = values.rememberMe
                            // update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
                            loginParams.code = that.inputCodeContent
                            loginParams.key = that.currdatetime
                            // console.log("登录参数",loginParams)
                            that.zjlogin(loginParams).then((res) => {
                                sessionStorage.setItem('role', 3)
                                this.$refs.loginSelect.show(res.result)
                            }).catch((err) => {
                                that.requestFailed(err);
                            });
                        } else {
                            that.loginBtn = false;
                        }
                    })
                }
                /* // 专家登录
                if (that.customActiveKey === 'tab1') {
                    if (that.loginType == 'phone') {
                        that.form.validateFields(['mobile', 'captcha', 'inputCode', 'rememberMe'], {
                            force: true
                        }, (err, values) => {
                            if (!err) {
                                loginParams.remember_me = values.rememberMe
                                loginParams.key = that.currdatetime
                                loginParams.phoneNumber = values.mobile
                                loginParams.code = values.captcha
                                // console.log("登录参数",loginParams)
                                that.ZjUserYzmLogin(loginParams).then((res) => {
                                    sessionStorage.setItem('role', 3)
                                    this.$refs.loginSelect.show(res.result)
                                }).catch((err) => {
                                    that.requestFailed(err);
                                });
                            } else {
                                that.loginBtn = false;
                            }
                        })
                    } else {
                        that.form.validateFields(['username_zj', 'password_zj', 'inputCode', 'rememberMe'], {
                            force: true
                        }, (err, values) => {
                            if (!err) {
                                loginParams.userName = values.username_zj
                                // update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
                                //loginParams.password = md5(values.password)
                                //loginParams.password = encryption(values.password,that.encryptedString.key,that.encryptedString.iv)
                                // loginParams.passWord = values.password_zj
                                loginParams.passWord = this.passwordEncryption(values.password_zj)
                                loginParams.remember_me = values.rememberMe
                                // update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
                                loginParams.code = that.inputCodeContent
                                loginParams.key = that.currdatetime
                                // console.log("登录参数",loginParams)
                                that.zjlogin(loginParams).then((res) => {
                                    sessionStorage.setItem('role', 3)
                                    this.$refs.loginSelect.show(res.result)
                                }).catch((err) => {
                                    that.requestFailed(err);
                                });
                            } else {
                                that.loginBtn = false;
                            }
                        })
                    }
                    // 集团推荐单位登录
                } else if (that.customActiveKey === 'tab2') {
                    that.form.validateFields(['username', 'password', 'inputCode', 'rememberMe'], {
                        force: true
                    }, (err, values) => {
                        if (!err) {
                            loginParams.userName = values.username
                            // update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
                            //loginParams.password = md5(values.password)
                            //loginParams.password = encryption(values.password,that.encryptedString.key,that.encryptedString.iv)
                            loginParams.passWord = values.password
                            loginParams.remember_me = values.rememberMe
                            // update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
                            loginParams.code = that.inputCodeContent
                            loginParams.key = that.currdatetime
                            //   console.log("登录参数",loginParams)
                            that.TjdwUserLogin(loginParams).then((res) => {
                                //   console.log('Dssdsdfdsf',res)
                                sessionStorage.setItem('role', 1)
                                this.$refs.loginSelect.show(res.result)
                            }).catch((err) => {
                                that.requestFailed(err);
                            });


                        } else {
                            that.loginBtn = false;
                        }
                    })
                    // 管理员登录
                } else if (that.customActiveKey === 'tab3') {
                    that.form.validateFields(['username', 'password', 'inputCode', 'rememberMe'], {
                        force: true
                    }, (err, values) => {
                        if (!err) {
                            loginParams.username = values.username
                            // update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
                            //loginParams.password = md5(values.password)
                            //loginParams.password = encryption(values.password,that.encryptedString.key,that.encryptedString.iv)
                            loginParams.password = values.password
                            loginParams.remember_me = values.rememberMe
                            // update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
                            loginParams.captcha = that.inputCodeContent
                            loginParams.checkKey = that.currdatetime
                            // console.log("登录参数",loginParams)
                            that.Login(loginParams).then((res) => {
                                sessionStorage.setItem('role', 2)
                                this.$refs.loginSelect.show(res.result)
                            }).catch((err) => {
                                that.requestFailed(err);
                            });


                        } else {
                            that.loginBtn = false;
                        }
                    })
                    // 使用手机号登录
                } else {
                    //   console.log(that.customActiveKey,12323423232)
                    that.form.validateFields(['mobile', 'captcha', 'rememberMe'], {
                        force: true
                    }, (err, values) => {
                        if (!err) {
                            loginParams.mobile = values.mobile
                            loginParams.captcha = values.captcha
                            loginParams.remember_me = values.rememberMe
                            that.PhoneLogin(loginParams).then((res) => {
                                // console.log(res.result);
                                this.$refs.loginSelect.show(res.result)
                            }).catch((err) => {
                                that.requestFailed(err);
                            })

                        }
                    })
                } */
            },
            getCaptcha(e) {
                e.preventDefault();
                let that = this;
                this.form.validateFields(['mobile'], {
                    force: true
                }, (err, values) => {
                    if (!values.mobile) {
                        that.cmsFailed("请输入手机号");
                    } else if (!err) {
                        this.state.smsSendBtn = true;
                        let interval = window.setInterval(() => {
                            if (that.state.time-- <= 0) {
                                that.state.time = 60;
                                that.state.smsSendBtn = false;
                                window.clearInterval(interval);
                            }
                        }, 1000);
                        const hide = this.$message.loading('验证码发送中..', 0);
                        let smsParams = {};
                        smsParams.phoneNumber = values.mobile;
                        smsParams.code = that.inputCodeContent;
                        smsParams.key = that.currdatetime;
                        smsParams.type = "5";
                        getAction("/cxj/sysCxjUser/cxjsb_getYzm", smsParams).then(res => {
                            if (!res.success) {
                                setTimeout(hide, 0);
                                this.cmsFailed(res.message);
                            }
                            //   console.log(res);
                            setTimeout(hide, 500);
                        }).catch(err => {
                            setTimeout(hide, 1);
                            clearInterval(interval);
                            that.state.time = 60;
                            that.state.smsSendBtn = false;
                            this.requestFailed(err);
                        });
                    }
                });
            },
            stepCaptchaSuccess() {
                this.loginSuccess()
            },
            stepCaptchaCancel() {
                this.Logout().then(() => {
                    this.loginBtn = false
                    this.stepCaptchaVisible = false
                })
            },
            handleChangeCheckCode() {
                this.currdatetime = new Date().getTime();
                getAction(`/sys/randomImage/${this.currdatetime}`).then(res => {
                    if (res.success) {
                        this.randCodeImage = res.result
                        this.requestCodeSuccess = true
                    } else {
                        this.$message.error(res.message)
                        this.requestCodeSuccess = false
                    }
                }).catch(() => {
                    this.requestCodeSuccess = false
                })
            },
            loginSuccess() {
                sessionStorage.setItem('loginSource', 2)
                this.$router.push({
                    path: "/dashboard/analysis"
                }).catch(() => {
                    console.log('登录跳转首页出错,这个错误从哪里来的')
                })
                this.$notification.success({
                    message: '欢迎',
                    description: `${timeFix()}，欢迎回来`,
                });
            },
            cmsFailed(err) {
                this.$notification['error']({
                    message: "登录失败",
                    description: err,
                    duration: 4,
                });
            },
            requestFailed(err) {
                this.$notification['error']({
                    message: '登录失败',
                    description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
                    duration: 4,
                });
                this.loginBtn = false;
            },
            validateMobile(rule, value, callback) {
                if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
                    callback();
                } else {
                    callback("您的手机号码格式不正确!");
                }
            },
            validateInputCode(rule, value, callback) {
                if (!value || this.verifiedCode == this.inputCodeContent) {
                    callback();
                } else {
                    callback("您输入的验证码不正确!");
                }
            },
            generateCode(value) {
                this.verifiedCode = value.toLowerCase()
            },
            inputCodeChange(e) {
                this.inputCodeContent = e.target.value
            },
            loginSelectOk() {
                this.loginSuccess()
            },
            getRouterData() {
                this.$nextTick(() => {
                    if (this.$route.params.username) {
                        this.form.setFieldsValue({
                            'username': this.$route.params.username
                        });
                    }
                })
            },
            change1() {
                if (this.loginType == 'username') {
                    this.loginType = 'phone'
                } else {
                    this.loginType = 'username'
                }
                return this.loginType;
            },
            //获取密码加密规则
            getEncrypte() {
                var encryptedString = Vue.ls.get(ENCRYPTED_STRING);
                if (encryptedString == null) {
                    getEncryptedString().then((data) => {
                        this.encryptedString = data
                    });
                } else {
                    this.encryptedString = encryptedString;
                }
            },
        }
    }
</script>

<style lang="less" scoped>
    .main {
        padding-top: 20px;
    }

    .user-layout-login {
        label {
            font-size: 14px;
        }

        .getCaptcha {
            height: 44px;
            border: none;
            cursor: pointer;
            position: absolute;
            right: 3px;
            top: 3px;
            color: #006DC0;
            font-size: 18px;
        }

        .getCaptcha[disabled] {
            color: #d9d9d9;
        }

        .forge-password {
            font-size: 20px;
        }

        button.login-button {
            // padding: 0 15px;
            // font-size: 16px;
            // height: 40px;
            // line-height: 40px;
            // width: 100%;
            // margin:0;
            width: 434px;
            height: 54px;
            background: linear-gradient(90deg, #3D9CED 0%, #1A60C7 99%, #1A60C7 100%);
            border-radius: 5px;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: center;
            justify-content: center;
            -ms-flex-align: center;
            align-items: center;
        }

        .user-login-other {
            text-align: left;
            margin-top: 24px;
            line-height: 22px;

            .item-icon {
                font-size: 24px;
                color: rgba(0, 0, 0, .2);
                margin-left: 16px;
                vertical-align: middle;
                cursor: pointer;
                transition: color .3s;

                &:hover {
                    color: #1890ff;
                }
            }

            .register {
                float: right;
            }
        }
    }

    .codeimg {
        width: 100%;
        cursor: pointer;
    }
</style>
<style lang="less">
    .valid-error .ant-select-selection__placeholder {
        color: #f5222d;
    }

    .ant-tabs-nav .ant-tabs-tab {
        margin: 0;
    }

    .main_tabs_box {
        .ant-tabs-nav {

            // width:100%;
            // >div {
            //   display: flex;
            //   justify-content: space-between;
            //   align-items: center;
            // }
            .ant-tabs-tab {
                font-size: 20px;
            }
        }

        .ant-input-lg {
            font-size: 20px;
            height: 50px;
        }

        .ant-form-item-children {
            display: block;
            height: 50px;
        }
    }

    button.login-button {
        span {
            font-size: 22px;
            color: #fff;
        }
    }
</style>